<template>
  <echart :options="options" :loading="loading" @chart-click="clickHandle"/>
</template>
<script setup>
import { ref, defineProps, computed, watch, defineEmits } from 'vue'
import echart from './src'
const emit = defineEmits(['chart-click'])
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  series: {
    type: Array,
    require: true,
    default: () => [],
  },
  dataset: {
    type: Object,
    require: true,
    default: () => ({}),
  },
  labelPos: {
    type: String,
    default: 'top',
  },
  interval: {
    type: String,
    default: null,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  legendShow: {
    type: Boolean,
    default: false,
  },
  tooltipShow: {
    type: Boolean,
    default: true,
  },
  axisLabel: {
    type: Boolean,
    default: true,
  },
})
watch(
  () => props.dataset,
  (val) => {
    options.value.dataset = val
  }
)
const clickHandle = (params)=>{
    emit('chart-click', params);
}
const options = ref({
  title:{
    text: props.title,
    left: 'center',
  },
  tooltip: {
    show: props.tooltipShow,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    show: props.legendShow,
    left: 'center', // 距离左侧的距离
    top: 'bottom' // 放置在底部
  },
  grid: {
    bottom: '15%',//echarts图片和底部的距离
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLabel: {
        // rotate: 45,
        interval: 0,
        overflow: 'breakAll',
        formatter: function (value) {
          return value.split('&').join('\n')
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      position: 'left',
      axisLabel:props.axisLabel,
      interval: props.interval
    },
    // {
    //   type: 'value',
    //   position: 'right',
    //   splitLine: {
    //     show: false,
    //   },
    // },
  ],
  label: {
    show: true,
    position: props.labelPos,
    // formatter(a) {
    //   console.log(a, 'aaa')
    //   return ''
    // },
  },
  series: props.series,
})
</script>
